// 同一个 React.createContext() 实例， 可以多层 Provider 和 Consumer 的嵌套，
// 同一级多个Consumer能取到的值，都是相同的，并且 由 离他最近的CounterContext.Provider 决定

import React from "react";
import ReactDOM from "react-dom/client";
const CounterContext = React.createContext();
class App extends React.Component {
  render() {
    return (
      <CounterContext.Provider value={1}>
        <CounterContext.Consumer>
          {(value) => {
            console.log("first", value);
            return (
              <CounterContext.Provider value={2}>
                <CounterContext.Consumer>
                  {(value) => {
                    console.log("second", value);
                    return (
                      <CounterContext.Provider value={3}>
                        <CounterContext.Consumer>
                          {(value) => {
                            console.log("third", value);
                            return <div>{value}</div>;
                          }}
                        </CounterContext.Consumer>
                      </CounterContext.Provider>
                    );
                  }}
                </CounterContext.Consumer>
              </CounterContext.Provider>
            );
          }}
        </CounterContext.Consumer>
        <CounterContext.Consumer>
          {(value) => {
            console.log("老二", value);
            return <div>{value}</div>;
          }}
        </CounterContext.Consumer>
      </CounterContext.Provider>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);
